Plugins和Loaders都是webpack很強大的功能，他們兩者的差別在於loaders用在處理單一js檔案的時候，在bundle之前或是正在bundle的階段。而Plugins是在bundle或是chunk的階段，通常是在bundle產生的最後階段，之前已經介紹過loaders，今天要來介紹一些值得推薦的plugins。

Plugins有分兩種，一種是built-in plugins，表示已經在webpack裡面可以直接使用，另一種則是第三方開發的plugins(not built-in plugins)，那就是要另外用npm install先把package安裝。

Built-in plugins

// 已經有npm install webpack，就直接require webpack
var webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.optimize.DedupePlugin()
  ]
};

Third party plugins

// 要先從npm install安裝
npm install component-webpack-plugin

// 再用require的方式在webpack.config.js中引用
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
      new ComponentPlugin()
    ]
}

再來，就要推薦個人覺得不錯使用的plugins。

UglifyJsPlugin

把所有Javascript bundle後的程式碼最小化。它是屬於webpack優化相關(Optimize)的plugins，所以會看到用webpack.optimize去指定。

new webpack.optimize.UglifyJsPlugin([options])

options裡面有許多設定可以使用，例如：

new webpack.optimize.UglifyJsPlugin(
  compress: {
    // 移除沒有使用到的變數與function
    unused: true,
    // 不顯示壓縮時的警告
    warnings: false
  }
);

其他options設定可以參考 UglifyJS options。

DedupePlugin

搜尋相似或相等的檔案，並把重複的部分刪除，減少檔案大小。不過，這個plugin如果在watch mode的時候使用，會造成問題，所以建議在production build的時候使用。也是屬於webpack優化相關(Optimize)的plugins。

new webpack.optimize.DedupePlugin()

OccurenceOrderPlugin

根據module和chunk使用次數給它們id，常使用的module和chunk獲得更短的id，減少檔案大小。也是屬於webpack優化相關(Optimize)的plugins。

new webpack.optimize.OccurrenceOrderPlugin()

DefinePlugin

在compile的時候可以設定global變數，假設圖片路徑development和production不同，可以透過傳入一個變數來判斷。以下範例，傳入兩個變數ENV和DATA，在js裡面直接當global變數使用即可。

new webpack.DefinePlugin({
    // 傳入變數ENV，字串需加上''轉換
    ENV: '"production"',
    // 傳入變數DATA，json需先JSON.stringify
    DATA: JSON.stringify("object")
})

NoErrorsPlugin

使用這個package，在compile的時候如果遇到錯誤，將不會有任何bundle、build產生，這適合用在production階段，當eslint或是test的流程產生錯誤時，則不覆蓋原本沒問題的前一版build。(如果是syntax error，在build的時候都會終止，不產生bundle，所以加上這個plugin只是指整個compile的流程)

new webpack.NoErrorsPlugin()

ExtractTextPlugin

可以把require的CSS，打包到同一個CSS檔案，因為當使用require('style.css')時，webpack會自動產生標籤，並加到裡面，這樣CSS會直接輸出在html上，所以使用這個plugin，可以幫助我們整理成一份CSS。

首先，在CLI安裝

// 它是Third party plugins
// 所以要先透過NPM安裝，並設定到devDependencies
npm install extract-text-webpack-plugin --save-dev

再到webpack.config.js做設定

// webpack.config.js要先require這個package
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        // 要把style-loader和css-loader分開
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
    ]
  },
  plugins: [
      // 這邊hash會自動帶入，例如: styles.ab959b1223ab9a18bc9c.css
      new ExtractTextPlugin("styles.[hash].css")
    ]
  }
};

HtmlWebpackPlugin

動態產生html的plugin，也可以把webpack build出來的js、css存進去。當你的js或是css會加上hash的時候，動態產生html就可以動態指定js或css的檔名，非常實用。下面介紹基本用法。

它也是Third party plugins

// 透過NPM安裝，並設定到devDependencies
npm install html-webpack-plugin --save-dev

再到webpack.config.js做設定

// webpack.config.js要先require這個package
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: 'main.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  },
  plugins: [
      new HtmlWebpackPlugin()
    ]
  }
};

你也可以自己定義一個template，或指定一些變數、build出來的位置...等，想看更多可以參考html-webpack-plugin。

還有許多實用的plugins，像是CopyWebpackPlugin、HotModuleReplacementPlugin...等，因為plugins真的有很多，等有需求的時候相信google都可以找到合用的。

Feature flags 功能標籤

簡單說就是webpack可以指定global變數，這邊和前面提到的DefinePlugin不太一樣，DefinePlugin是提供給bundle的javascript使用，而這邊指的是在webpack.config.js可以使用的global變數。

舉例說明，在CLI指令下這個指令，可以把變數NODE_ENV帶入webpack.config.js使用

NODE_ENV=development webpack

而在webpack.config.js裡，就可以用下面程式碼

if (process.env.NODE_ENV === 'development') {
  // plugins 或是其他code，是只有在development時設定的
}

最常用就是像前面提到的DedupePlugin，只能在production環境中使用，所以當development用watch mode時，就可以用這種設定變數的方式區隔。而什麼是watch mode，下一篇就會再來說說！

參考

Webpack Using Plugins

Webpack List of Plugins

推薦好文 Webpack — The Confusing Parts